<template>
  <div class="system">
    <ElDivider />
    <template v-for="group in groups" :key="group.id">
      <el-card style="margin-bottom: 10px" v-if="SystemGroupCheck[group.id]">
        <template #header>{{ t(group.groupName) }} </template>
        <ElSpace wrap>
          <template v-for="(item, index) in systems">
            <ElCard class="system-item" :key="index" v-if="item.groupId == group.id" shadow="hover">
              <template #header>
                <div class="card-header v-mid">
                  <template v-if="item.sysIcon">
                    <Icon
                      :icon="item.sysIcon"
                      :color="item.iconColor"
                      :hoverColor="item.iconColor"
                    />
                  </template>
                  <ElLink
                    icon=""
                    type="primary"
                    @click="openSystem(item.id, item.sysName, item.sysIcon, item.iconColor)"
                    style="vertical-align: top; margin-left: 10px"
                  >
                    {{ t(item.sysName) }}
                  </ElLink>
                </div>
              </template>
              <div class="system-note">
                <ElText class="w-150px mb-2">
                  {{ item.note }}
                </ElText>
              </div>
            </ElCard>
          </template>
        </ElSpace>
      </el-card>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ElSpace, ElCard, ElText, ElDivider, ElLink } from 'element-plus'
import { ref, watch } from 'vue'
import { getSystems } from '@/api/system'
import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
import { getResourceApi } from '@/api/login'
import { usePermissionStore } from '@/store/modules/permission'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { useAppStore } from '@/store/modules/app'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { SystemGroupType } from '@/api/rbac/systemgroup/types'
import { listApi } from '@/api/rbac/systemgroup'
import { SystemType } from '@/api/system/types'
import { useI18n } from '@/hooks/web/useI18n'

const { t } = useI18n()

const permissionStore = usePermissionStore()

const userStore = useUserStore()

const tagsViewStore = useTagsViewStore()

//重置路由
//resetRouter()
//设置路由状态
permissionStore.setIsAddRouters(false)
//清除原有路由
//permissionStore.clearAddRouters()

//userStore.setSystemRouters([])

//清除所有tagsView的缓存
tagsViewStore.delAllViews()

const { currentRoute, addRoute, push } = useRouter()

const appStore = useAppStore()

appStore.setSystemName('')

const redirect = ref<string>('')

watch(
  () => currentRoute.value,
  (route: RouteLocationNormalizedLoaded) => {
    redirect.value = route?.query?.redirect as string
  },
  {
    immediate: true
  }
)

const groups = ref<SystemGroupType[]>([])
const loadSystemGroup = async () => {
  const rs = await listApi()
  if (rs.success) {
    groups.value = rs.data
  }
}
loadSystemGroup()

//用于检查分组是否有系统
const SystemGroupCheck = ref({})

const systems = ref<SystemType[]>([])
//加载有权限访问的系统
const getSystem = async () => {
  systems.value = (await getSystems()).data
  for (let i = 0; i < systems.value.length; i++) {
    const groupId = systems.value[i].groupId
    if (groupId) {
      SystemGroupCheck.value[groupId] = true
    }
  }
}
getSystem()

function openSystem(
  systemId: string,
  systemName: string,
  systemIcon: string,
  systemIconColor: string
) {
  appStore.setSystemName(t(systemName))
  appStore.setSystemIcon(systemIcon)
  appStore.setSystemIconColor(systemIconColor)
  getResource(systemId)
  //加载系统相关权限路由
}

// 获取系统可访问资源
const getResource = async (systemId: string) => {
  //服务器加载路由
  const res = await getResourceApi(systemId)
  if (res) {
    const routers = res.data || []
    //保存路由到用户
    userStore.setSystemRouters(routers)
    await permissionStore.generateRoutes('server', routers).catch(() => {})
    permissionStore.getAddRouters.forEach((route) => {
      addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
    })
    permissionStore.setIsAddRouters(true)
    push({ path: redirect.value || permissionStore.addRouters[0].path })
  }
}
</script>

<style scoped>
.system {
  padding-left: 10px;
  padding-right: 10px;
}

.system-note {
  height: 100px;
}

.system .system-item {
  width: 220px;
}

.system .system-item .el-card__header {
  background-color: rgb(69, 69, 235);
}

.clear {
  clear: both;
}
</style>
